<template>
  <div class="child" style="padding: 20px 30px;">
    <el-row>
      <el-col :span="18">
        <el-button type="success" @click="add(1)">添加</el-button>
        <el-button type="primary" @click="del()">删除</el-button>
      </el-col>
      <el-col :span="6">
        <div class="flex">
          <el-input v-model="formInline.name" placeholder="请输入内容" clearable />
          <i class="el-icon-search" @click="search" />
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="btnList">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- *************对话框开始************* -->
    <el-dialog
      :title="typeState ? '添加分类' : '编辑分类'"
      :visible.sync="addFormDialog"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <!-- 新增所属行业 -->
      <div>
        <el-form ref="ruleForm" :model="addForm" label-width="80px" :rules="typeRules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="addForm.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="addForm.remark" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFormDialog = false">取 消</el-button>
        <el-button type="primary" @click="addForm_enter('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  setupTypeList,
  setupTypeAdd,
  setupTypeDelete,
  setupTypeDetail
} from '@/api/setup'
export default {
  data () {
    return {
      formInline: {
        name: '', // 搜索字段
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      },
      total: 1,
      tableData: [],
      currentPage: 1,
      typeState: 1,
      addForm: {
        id: '', // id
        name: '', // 名称
        remark: '', // 备注
      },
      addFormDialog: false,
      typeRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ]
      },
      multipleSelection: []
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getAll(this.formInline)
  },
  // 方法集合
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = []
      val.map(c => {
        this.multipleSelection.push(c.id)
      })
      this.multipleSelection = this.multipleSelection.join(',')
    },
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    removeTag (index) {
      console.log(index)
    },
    tagChange (index) {
      this.$forceUpdate()
      console.log(index)
    },
    // 查询
    search () {
      this.total = 1
      this.formInline.page = 1
      this.getAll(this.formInline)
    },
    // 清除
    clear () {
      this.formInline = {
        name: '', // 搜索字段
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      }
      this.getAll(this.formInline)
    },
    // 新增所属行业
    add (index) {
      this.typeState = 1
      if (index === 1) {
        this.addForm = {
          id: '',
          name: '',
          remark: '',
        }
        this.addFormDialog = true
      }
    },
    // 确认新增所属行业
    addForm_enter (ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.typeState) {
            console.log(this.addForm)
            setupTypeAdd(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
              }
              this.getAll(this.formInline)
              this.addFormDialog = false
            })
          } else {
            setupTypeAdd(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              }
              this.getAll(this.formInline)
              this.addFormDialog = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 编辑所属行业
    edit (row) {
      this.typeState = 0
      this.addFormDialog = true
      console.log(row)
      setupTypeDetail({ id: row.id }).then(res => {
        console.log(res, 'res')
        this.addForm = res.data
        console.log(this.addForm)
        // this.addForm.roleIds = [1];
      })
    },
    // 删除所属行业
    async del (row) {
      if (row) {
        const res = await setupTypeDelete({ ids: row.id })
        if (res.code === '') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        }
        this.getAll(this.formInline)
      } else if (!this.multipleSelection || this.multipleSelection.length === 0) {
        this.$message({
          message: '请选择数据'
        })
        return
      } else {
        const res = await setupTypeDelete({ ids: this.multipleSelection })
        if (res.code === '') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        }
        this.getAll(this.formInline)
      }
    },
    // 初始化查询所有数据
    async getAll (formInline) {
      const res = await setupTypeList(formInline)
      this.tableData = res.data.list
      this.total = res.data.total
    }
  }
};
</script>
      <style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
    i {
      font-size: 26px;
      margin-left: 10px;
    }
  }
  .tableBox {
    padding-top: 20px;
  }
  </style>
  <style>
  .el-icon-search {
    cursor: pointer;
  }
</style>

